<template>
  <div class="container" >
    <el-form ref="form" :model="form" label-width="80px" class="form">
      <el-form-item  style="padding-left: 30%" >
        <span slot="label" style="font-size: 30px;">标题</span>
        <el-input v-model="form.name" style="width: 50%;"></el-input>
      </el-form-item>
      <el-form-item  style="padding-left: 10%">
        <span slot="label" style="font-size: 20px;" >限时</span>
        <el-col :span="11">
          <el-time-picker placeholder="选择时间" v-model="form.date" style="width: 80%;"></el-time-picker>
        </el-col>
        <span  style="font-size: 20px;">答卷次数</span>
        <el-input-number v-model="form.num" :min="1" :max="1000"></el-input-number>
      </el-form-item>
      <el-divider></el-divider>
      <!-- 遍历已创建的选项渲染 -->
      <div class="item" v-for="(item, index) in form.itemList" :key="index">
        <el-form-item :label="(index+1)+''">
          <div class="item_title">
            <span>、{{typeMap[item.type]}}: </span>
            <span v-text="item.title"></span>
          </div>
          <!-- 单项填空 -->
          <div v-if="item.type==='input'">
            <el-input class="disabled" placeholder="禁止输入" disabled></el-input>
          </div>
          <!-- 单选 -->
          <div v-else-if="item.type==='radio'">
            <div class="warp" v-for="(elm, i) in item.textList" :key="i">
              <el-radio :label="(i+1)+'、'"></el-radio>
              <el-input v-model="item.textList[i]"></el-input>
            </div>
          </div>
          
          <!-- 多选 -->
          <div v-else-if="item.type==='checkbox'">
            <div class="warp" v-for="(elm, i) in item.textList" :key="i">
              <el-checkbox :label="(i+1)+'、'"></el-checkbox>
              <el-input v-model="item.textList[i]"></el-input>
            </div>
          </div>

          <!-- 选择填空 -->
          <div v-else-if="item.type === 'select'">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="(elm, i) in item.textList" :key="i"
                :label="item.textList[i]"
                :value="i+''">
              </el-option>
            </el-select>
          </div>

          <!-- 矩阵填空 -->
          <div v-else-if="item.type==='matrix'">
            <div class="warp" v-for="(elm, i) in item.textList" :key="i">
              <span> {{item.textList[i]}}：</span>
              <el-input class="disabled" placeholder="禁止输入" disabled></el-input>
            </div>
          </div>
          <!-- 上移、下移、删除 -->
          <div style="margin-top: 10px">
            <el-button @click="handleItem('up', item)" v-if="index!=0">上移</el-button>
            <el-button @click="handleItem('down', item)" v-if="index!=form.itemList.length-1">下移</el-button>
            <el-button @click="handleItem('del', item)">删除</el-button>
            <el-button @click="edit(item, index)">编辑</el-button>
          </div>
        </el-form-item>
      </div>

    
      <el-divider></el-divider>
      <el-form-item  style="padding-left: 35%;padding-bottom: 5%;" >
        <el-button type="primary" @click="batch" round >批量导入题库</el-button>
      </el-form-item>
      
      <!-- 添加选项弹出框 -->
      <div class="additem">
        <el-dialog
          :title="typeMap[questItem.type]"
          :visible.sync="showItem"
          width="50%">
          <el-form-item label="标题">
            <el-input v-model="itemTitle"></el-input>
          </el-form-item>
          <el-form-item label="添加选项" v-show="questItem.type != 'input'">
            <el-input-number v-model="num" @change="handleChange" :min="1" :max="10"></el-input-number>
          </el-form-item>
          <el-form-item label="选项" v-for="(text, i) in itemText" :key="i" v-show="questItem.type != 'input'">
            <el-input v-model="itemText[i]"></el-input>
          </el-form-item>
          <span slot="footer" class="dialog-footer">
            <el-button @click="clearItem">取 消</el-button>
            <el-button type="primary" @click="determine">确 定</el-button>
          </span>
        </el-dialog>
      </div>
      <!-- 批量添加选项弹出框 -->
      <div class="batchinput">
        <el-dialog
          :title="typeMap[questItem.type]"
          :visible.sync="isBatchInput"
          width="50%">
          <ul  id="nav">
            <li><a href="###" >批量添加</a></li>
            <li><a href="#">从题库添加</a></li>
          </ul>
          <el-divider></el-divider>
          <div style="line-height:20px; text-align:left; margin-left:10px;position:relative;font-size:10px">
                        1、题目与题目之间需空一行，题目可以不加题号，题干中间不得换行 <br>
                        2、题干与选项，及各选项之间需回车换行，选项不得以数字开头（会被识别为题干） <br>
                        3、题目无选项直接空一行，会默认识别为文本型题目 <a id="hrefHelp" href="/help/help.aspx?helpid=138&amp;h=1" target="_blank"></a>
                   <br>
                   
          </div>
          <el-divider></el-divider>
          <img src="../../assets/img/batch.png" style="width: 700px">
          <span slot="footer" class="dialog-footer">
            <el-button @click="batch">取 消</el-button>
            <el-button type="primary" @click="batchInput">确 定</el-button>
          </span>
        </el-dialog>
      </div>

      <div class="submit">
        <el-form-item>
          <el-button type="primary" round @click="preview" >预览问卷</el-button>
          <el-button type="primary" round @click="onSubmit" >立即创建</el-button>
        </el-form-item>
      </div>
        <!-- 添加选项 -->
      <section class="remind">
        <el-form-item class="type">
          <el-button @click="add('radio')" style="font-size:5px">单选</el-button>
          <el-button @click="add('checkbox')"  style="font-size:5px">多选</el-button>
        </el-form-item>
        <el-form-item class="type">
          <el-button @click="add('input')"  style="font-size:5px">单项填空</el-button>
          <el-button @click="add('select')" style="font-size:5px">选择填空</el-button>
        </el-form-item>
        <el-form-item class="type"> 
          <el-button @click="add('matrix')" style="font-size:5px">矩阵填空</el-button>
        </el-form-item>
      </section>
    </el-form>

  </div>
</template>
<script>
export default{
  data(){
    return{
      value: '',
      matrixsNum: 1,
      num: 1,
      form: {
        itemList: [],
        name: '',
        date: '',
        num: ''
      },
      itemTitle: '',
      itemText: new Array(1),
      questItem: {},
      showItem: false,
      isBatchInput:false,
      typeMap: {
        radio: '单选',
        checkbox: '多选',
        input: '问答',
        matrix: '矩阵问答',
        select: '选择'
      },
      editIndex: ''
    }
  },
  watch: {
    showItem() {
      if(!this.showItem){
        this.clearItem()
      }
    }
  },
  methods: {
    
    mouseOver: function(){
            this.active = 'background-color: #cccccc';
        },
        mouseLeave: function () {
            this.active = '';
        },
    preview(){
      console.log(this.form)
       let newPage = this.$router.resolve({ 
       path: '/previewQuestionnaire', 
       query: {
        form: JSON.stringify(this.form)
       }
     });

      window.open(newPage.href, '_blank');
    },
    batch(){
      this.isBatchInput = !this.isBatchInput;
    },

    batchInput(){
      // this.form.itemList.push(
      var question = {};
      question.type = "radio";
      question.title = "题目1";
      question.textList = [
            "选项1",
            "选项2",
            "选项3"
        ];
      this.form.itemList.push(question);
      question = {}
      question.type = "checkbox";
      question.title = "题目2";
      question.textList = [
            "选项4",
            "选项5",
            "选项6"
        ];
      question.value = [false,false,false]
      this.form.itemList.push(question);
      question = {}
      question.type = "input";
      question.title = "单行文本题";
      this.form.itemList.push(question);
      question = {}
      this.isBatchInput = false
    },
    add(type){
      this.questItem.type = type
      this.showItem = true
    },
    // 增加/减少 子选项
    handleChange(val){
      this.itemText.length = val
    },
    // 确定将选项添加进列表中进行渲染
    determine(){
      if(this.questItem.type=='input'){
        // 填空
        if(this.itemTitle == ''){
          this.$message('请输入选项的标题内容');
          return
        }
        if(this.editIndex !== '') {
          this.questItem.title = this.itemTitle
          this.form.itemList.splice(this.editIndex, 1, this.questItem)
          this.editIndex = ''
        }else{
          this.questItem.title = this.itemTitle;
  
          this.form.itemList.push(this.questItem);
        }
        this.clearItem()
      }else if(this.questItem.type == 'radio' || this.questItem.type == 'checkbox' || this.questItem.type == 'matrix' || this.questItem.type == 'select'){
        // 单选、多选、矩阵
        if(this.itemTitle == ''){
          this.$message('请输入选项的标题内容');
          return
        }
        for (var i = 0; i < this.itemText.length; i++){
          if(this.itemText[i] == '' || this.itemText[i] == undefined){
            this.$message('请完整输入每个选项内容');
            return
          }
        }
        if(this.editIndex !== '') {
          this.questItem.title = this.itemTitle;
          this.questItem.textList = this.itemText;
          this.form.itemList.splice(this.editIndex, 1, this.questItem)
          this.editIndex = ''
        }else{
          this.questItem.title = this.itemTitle;
          this.questItem.textList = this.itemText;
          if(this.questItem.type == 'checkbox'){
            this.questItem.value = [];
            for (var i = 0; i < this.itemText.length; i++){
              this.questItem.value[i] = false
            }

          }

          }
          this.form.itemList.push(this.questItem);
          
        }
        console.log(this.questItem);
        this.clearItem()
      
      
    },
    // 编辑
    edit(item, editIndex){
      this.editIndex = editIndex
      if(item.type !== 'input'){
        this.num = item.textList.length
        this.showItem = true
        this.questItem = item
        this.itemTitle = item.title
        this.itemText = []
        this.itemText.push(...item.textList)
      }else{
        this.showItem = true
        this.questItem = item
        this.itemTitle = item.title
      }
    },
    // 关闭弹窗，清空数据
    clearItem(){
      this.num = 1
      this.itemTitle = ''
      this.itemText = ['']
      this.questItem = {}
      this.showItem = false
      this.batchInput = false
    },
    // 判断上移、下移、删除
    handleItem(val, item){
      switch(val){
        case 'up':
          this.moveUp(item);
        break;
        case 'down':
          this.moveDown(item);
        break;
        case 'del':
          this.delItem(item);
        break;
        default: 
          throw new Error("该操作不存在！")
      }
    },
    // 上移
    moveUp(item){
      let index = this.form.itemList.indexOf(item)
      this.form.itemList.splice(index, 1)
      this.form.itemList.splice(index-1, 0, item)
    },
    // 下移
    moveDown(item){
      let index = this.form.itemList.indexOf(item)
      this.moveUp(this.form.itemList[index+1])
    },
    // 删除
    delItem(item){
      let index = this.form.itemList.indexOf(item)
      this.form.itemList.splice(index, 1)
    },
    // 提交
    onSubmit() {
      if(this.form.name == ''){
        this.$message('请输入标题内容');
        return
      }
      if(this.form.date == ''){
        this.$message('请选择时间');
        return
      }
      if(this.form.itemList.length == 0){
        this.$message('至少添加一个选项');
        return
      } 
      var formData = this.form;
      console.log(formData)
      formData.itemList = JSON.stringify(formData.itemList)
      this.$axios({
            url: `/api/saveQuestionnaire`,
            method: 'post',
            data: {
              ...formData
            }
          }).then(res=>{
            console.log(res);
            this.$message({
                showClose: true,
                type: 'success',
                message: '问卷创建成功',
                duration: 1500 
              })
              this.$router.push({path:"/index"})
          })
     
    }

  },
}
</script>
<style lang="less" scoped>
.warp{
  display: flex;
  align-items: center;
}
.disabled{
  background: #F5F7FA;
}
input{
  -webkit-appearance: none;
  background-color: #FFF;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  box-sizing: border-box;
  color: #606266;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  margin: 10px 0 0;
}
.el-radio {
    color: #606266;
    cursor: pointer;
    margin-right: 0;
}

  .remind {
  border-radius: 4px;
  padding: 10px 20px;
  display: flex;
  position: fixed;
  right: 20px;
  bottom: 30%;
  flex-direction: column;
  color: #606266;
  background-color: #fff;
  border-left: 4px solid #409eff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}  
.submit {
  border-radius: 4px;
  padding: 10px 20px;
  display: flex;
  position: fixed;
  right: 10px;
  bottom: 60%;
  flex-direction: column;
  // color: #606266;
  // background-color: #fff;
  // border-left: 4px solid #409eff;
  // box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
  
}  
.type {
  font-size: 40px;
  font-weight: 100px;
  margin-left: -80px;
}

.form{
  padding-left: 10% ;
  padding-top: 5%;
  width: 700px;
}

.container {
    left: 3%;
    border-radius: 2px;
    border: 1px solid rgba(217,217,217,1);
    width: 898px;
    height:500px;
    padding-bottom: 5px;
    margin: 0;
    margin-top: 8px;
    overflow: auto;
    background: #fff;
    box-shadow: 0 2px 5px 0 #d9d9d9;
    position: relative;
}

#nav {

   
}
#nav ul {
    list-style: none;
}
#nav li {
    display: inline;
  }
#nav a {
    color : rgb(0, 0, 0);
    text-decoration : none;padding : 0 20px;
}
#nav a:hover {
    border-bottom: 2px solid #409eff;
}




</style>
